<template>
    <div class="list-filter-panel">
        <transition name="slide-fade">
            <div class="Searchform" v-show="Searchform.isOpen">
                <el-form :inline="true" :model="Searchform.formInline" :rules="Searchform.formmsgrules" class="demo-form-inline">
                <el-form-item label="姓名：">
                    <el-input v-model="Searchform.formInline.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="班级：">
                    <el-select  v-model="Searchform.formInline.class" placeholder="班级">
                    <el-option label="1班" value="1班"></el-option>
                    <el-option label="2班" value="2班"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-select v-model="Searchform.formInline.gender" placeholder="性别">
                    <el-option style="width:100%" label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary"  @click="searchTable">查询</el-button>
                    <el-button @click="refreshSearch">重置</el-button>
                </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-button :icon="Searchform.icon" type="text" style="margin-left:13px;" @click="foldHandle()">{{Searchform.fText}}</el-button>
        <div class="table" :style="Searchform.tablestyle">
            <template >
                <div class="tableHander">
                    <div class="tableHander-left" >
                        <el-button  type="primary"  icon="el-icon-circle-plus-outline" @click="addDrawer('新增')" >新增用户</el-button>
                    </div>
                    <div class="tableHander-right" >
                    <el-row>
                        
                          <el-button  @click="refresh" icon="el-icon-refresh" circle></el-button>
                          <el-button @click="downloadFile"  icon="el-icon-download" circle></el-button>
                          <el-button  icon="el-icon-search"  circle></el-button>
                    </el-row>
                    </div>
                </div>
				
			</template>
            <template>
                <div class="tableMsg">
                    <template>
                        <el-table :cell-style="{ 'text-align': 'center' }" :header-cell-style="{background:'#fafafa','text-align':'center'}" :data="Table.tableData" :height="Table.tableHeight" stripe style="width: 100%">
                        <el-table-column type="index" width="50" label="序号"></el-table-column>
                        <el-table-column prop="sid" width="180" label="学号" ></el-table-column>
                        <el-table-column prop="name" width="180" label="姓名" ></el-table-column>
                        <el-table-column prop="gender" width="90" label="性别" ></el-table-column>
                        <el-table-column prop="college" width="280" label="院系" >	</el-table-column>
                        <el-table-column prop="professional" width="180" label="专业" >	</el-table-column>
                        <el-table-column prop="class" width="180" label="班级" >	</el-table-column>
                        <el-table-column fixed="right" label="操作" width="260">
                        <template slot-scope="scope">
                            <el-button @click="viewDrawer(scope.row)" icon="el-icon-view" type="text" size="small">查看</el-button>
                            <el-button @click="editorDrawer(scope.row)" icon="el-icon-edit" type="text" size="small">编辑</el-button>
                            <el-button @click="deleClick(scope.row)" icon="el-icon-delete" type="text" size="small">删除</el-button>
                        </template>
                        </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div>
                    <el-pagination  @current-change="handleCurrentChange" :page-size="10" background layout="prev, pager, next" :total="Table.total">

                    </el-pagination>
                </div>
            </template>
        </div>

        <el-drawer class="drawer"
            :title="`${Drawer.drawerTitle}用户`"
            :destroy-on-close="true" 
            :visible.sync="Drawer.drawer"
            direction="rtl"
            size="500px">
                <el-form 
                    :model="Drawer.formInline"  
                    label-width="100px"
			        label-suffix=" :"
			        :disabled="Drawer.view"
                    :rules="formmsgrules" 
                    ref="Drawer.formInline" >
                    <el-image 
                        :src="Drawer.src"  
                        style="width: 130px; height: 130px" 
                        :previewSrcList="Drawer.srcList">
                        </el-image>
                    <el-form-item   label="学号：" prop="sid" >
                        <el-input style="width:380px"  :disabled="!Drawer.add" v-model="Drawer.formInline.sid"  ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名：" prop="name" >
                    <el-input style="width:380px" v-model="Drawer.formInline.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：" prop="gender" >
                    <el-select style="width:380px"  v-model="Drawer.formInline.gender" placeholder="请选择性别">
                        <el-option  label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                    </el-form-item>
                    
                    <el-form-item label="院系：" prop="college" >
                    <el-select style="width:380px"  v-model="Drawer.formInline.college"  placeholder="请选择院系">
                        <el-option  label="计算机与信息工程学院" value="计算机与信息工程学院"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                    </el-form-item>
                    
                    <el-form-item label="专业：" prop="professional" >
                    <el-select style="width:380px" v-model="Drawer.formInline.professional" placeholder="请选择专业">
                        <el-option label="软件工程" value="软件工程"></el-option>
                        <el-option label="网络工程" value="网络工程"></el-option>
                        <el-option label="大数据" value="大数据"></el-option>
                        <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>
                    </el-select>
                    </el-form-item>
                    
                    <el-form-item label="班级：" prop="class" >
                    <el-select style="width:380px" v-model="Drawer.formInline.class" placeholder="请选择院系">
                        <el-option label="1班" value="1班"></el-option>
                        <el-option label="2班" value="2班"></el-option>
                        <el-option label="3班" value="3班"></el-option>
                        <el-option label="4班" value="4班"></el-option>
                        <el-option label="5班" value="5班"></el-option>
                    </el-select>
                    </el-form-item>
                </el-form>
            <el-divider></el-divider>
            <template>
                <el-button class="elbut" @click="Drawer.drawer = false">取消</el-button>
                <el-button class="elbut" v-show="!Drawer.view" type="primary" @click="handleSubmit('Drawer.formInline')">确定</el-button>
            </template>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: '',
        components:{
        },
        data(){
            return {
                // 折叠搜索
                formLabelWidth:200,
                Searchform:{
                    searchMsg:"",
                    isOpen:false,
                    fText:'展开搜索',
                    icon:"el-icon-arrow-down",
                    tablestyle:'height: 480px;',
                    formInline:{
                        sid:'',
                        name:'',
                        gender:'',
                        college:'',
                        professional:'',
                        class:'',
                    },
                },
                Drawer:{
                    drawer: false,
                    drawerTitle : "",
                    view:false,
                    add:true,
                    formInline:{
                        sid:'',
                        name:'',
                        gender:'',
                        college:'',
                        professional:'',
                        class:'',
                    },
                    src:"https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/img/20220728110012.jpg",
                    srcList:['https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/img/20220728110012.jpg']
                },
                Table:{
                    currentPage:0,
                    total:100,
                    tableHeight:370,
                    tableData:[]
                },
                formmsgrules:{
                        sid: [
                            { required: true, message: '请输入学号', trigger: 'change' },
                            { min: 13, max: 13, message: '长度为13', trigger: 'blur' }
                        ],
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'change' }
                        ],
                        gender: [
                            { required: true, message: '请输选择性别', trigger: 'change' }
                        ],
                        college: [
                            { required: true, message: '请输入学院', trigger: 'change' }
                        ],
                        professional: [
                            { required: true, message: '请输入专业', trigger: 'change' }
                        ],
                        class: [
                            { required: true, message: '请输入班级', trigger: 'change' }
                        ],
                    },
            }
        },
        mounted(){
            this.getData("all")
        },
        methods: {
            async getData(way,searchMsg){
                this.Table.tableData = [];
                let data = await this.$api.StuData.doPost(way,this.Table.currentPage,searchMsg);
                // console.log(data);
                data = await this.$api.StuData.doGet();
                const s = data.data.split("\r\n")
                this.Table.total = parseInt(s[0]);
                const num = 0;
                for (let i in s){
                    if (i <= num  || s[i] === '')continue;
                    const student = s[i].split(",")
                    const formInline ={
                        sid:student[0],
                        name:student[1],
                        gender:student[2],
                        college:student[3],
                        professional:student[4],
                        class:student[5],
                    }
                    this.Table.tableData.push(formInline);
                }
            },
            async downloadFile(){
                let data = await this.$moc.addressUrl.doGet();
                window.location.href= data.data.data.downloadUrl; 
                this.$notify({
                    title: "温馨提示",
                    message: "如果数据庞大会导致下载缓慢，请您耐心等待！",
                    type: "info",
                    duration: 3000
                });
            },
            refresh(){
                this.getData("all");
                this.$message({showClose: true,message:"刷新成功",type: "success"});
            },
            handleCurrentChange(val){
                this.Table.currentPage = val;
                this.getData("")
            },
            foldHandle(){
                this.Searchform.isOpen = !this.Searchform.isOpen;
                this.Searchform.fText = this.Searchform.isOpen?'收起':'展开搜索'
                this.Searchform.tablestyle = this.Searchform.isOpen?'height: 386.6px;':'height: 480px;'
                this.Table.tableHeight = this.Searchform.isOpen?276.6:370
                this.Searchform.icon = this.Searchform.isOpen?"el-icon-arrow-up":"el-icon-arrow-down"
            },
            searchTable(){
                const from = this.Searchform.formInline
                if(from.name||from.class||from.gender){
                    let msg =""
                    msg+= from.name? `name like "%${from.name}%" and ` : `name like "%" and `;
                    msg+= from.class? `class like "%${from.class}%" and ` : `class like "%" and `;
                    msg+= from.gender? `gender like "%${from.gender}%"` : `class like "%"`;
                    console.log(msg);
                    this.getData("search",msg)
                }
                else{
                    this.$message({showClose: true,message:"请输入查询内容",type: "error"});
                }
            },
            refreshSearch(){
                this.Searchform.formInline={
                        sid:'',
                        name:'',
                        gender:'',
                        college:'',
                        professional:'',
                        class:'',
                    }
            },
            addDrawer(){
                this.Drawer.drawerTitle = "添加";
                this.Drawer.drawer = true;
                this.Drawer.view = false;
                this.Drawer.add = true;
                this.Drawer.formInline = {
                        sid:'',
                        name:'',
                        gender:'',
                        college:'',
                        professional:'',
                        class:'',
                }
            },
            editorDrawer(row){
                this.Drawer.drawerTitle = "编辑";
                this.Drawer.drawer = true;
                this.Drawer.view = false;
                this.Drawer.add = false;
                this.Drawer.formInline = row
            },
            viewDrawer(row){
                this.Drawer.drawerTitle = "查看";
                this.Drawer.drawer = true;
                this.Drawer.view = true,
                this.Drawer.add = false;
                this.Drawer.formInline = row
            },
            deleClick(row){
                this.$confirm(`您是否确认删除【${row.name}】学生?`, "温馨提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.Table.tableData.splice(this.Table.tableData.indexOf(row),1)
                    
                    let msg = `sid="${row.sid}" and name="${row.name}"`
                    this.getData("del",msg);
                    this.$message({showClose: true,message:"删除成功",type: "success"});
                });
            },
            handleSubmit(formName){
                const title = this.Drawer.drawerTitle 
                if(title === '添加')this.addStu(formName);
                if(title === '编辑')this.editStu(formName);
            },
            addStu(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    const from = this.Drawer.formInline
                    let msg =`("${from.sid}","${from.name}","${from.gender}","${from.college}","${from.professional}","${from.class}")`
                    console.log(msg);
                    this.getData("add",msg)
                    this.Drawer.drawer = !this.Drawer.drawer;
                }
                });
            },
            editStu(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    const from = this.Drawer.formInline
                    let msg =`name="${from.name}",gender="${from.gender}",college="${from.college}"`
                                +`,professional="${from.professional}",class="${from.class}" `
                                +`where sid="${from.sid}"`
                    console.log(msg);
                    this.getData("edit",msg)

                    this.Drawer.drawer = !this.Drawer.drawer;
                } else {
				    this.$message({showClose: true,message: "请补全",type: 'error'});
                    return false;
                }
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateY(5px);
        opacity: 0;
    }
    .list-filter-panel{
        height: 520px;
        padding-bottom:10px;
        // background: #000;
        margin-top:-10px;
        .Searchform{
            background: #fff;
            border-radius: 10px;
            padding-top: 30px;
        }
        .el-button--primary{
            background: #174e49;
            border-color: #174e49;
        }
        .el-button--text{
            color: #174e49;
        }
        
        .table{
            // height: 500px;
            background: #fff;
            border-radius: 10px;
            padding-top: 20px;

            .tableHander{
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                .tableHander-left{
                    width: 50%;
                    text-align: left;
                    padding-left: 20px;
                }
                .tableHander-right{
                    width: 50%;
                    padding-right: 20px;
                    text-align: right;
                }
            }
            .tableMsg{
                // padding-top: 10px;
                margin: 20px;
                margin-bottom: 10px;
                // border-top: 1px solid #000;

            }
        }
        .drawer{
            .el-form{
                height: 82%;
                
            }
            .elbut{
                width: 200px;
            }
        }
    }
    
</style>